<template>

  <div class="show-more-wrapper">
    <slot name="main"></slot>
    <el-collapse-transition>

      <div class="wrap-more" v-if="collapse">
        <slot name="more"></slot>
      </div>
    </el-collapse-transition>

    <el-row>
      <el-col style="float: right">
        <el-form-item style="display: flex;justify-content: flex-end">
          <div>
            <slot name="footer">
              <el-button @click="$emit('getData')" size="small" type="primary">查询</el-button>
              <el-button @click="$emit('resetSearch')" plain size="small">重置</el-button>
            </slot>

            <el-link
              :underline="false"
              @click="collapse=!collapse" style="transition: all .3s ;margin-left: 10px"
              type="primary"
              v-if="this.$slots.more">
              <span key="col" v-if="collapse">收起</span>
              <span key="exp" v-else>展开</span>
              <i :class="['el-icon-arrow-down','el-icon--right','rotate',{'rotate-left':collapse}]"/>
            </el-link>

          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>


</template>

<script>
  import layoutMixin from '@/mixins/layoutMixin'

  export default {
    name: 'ShowMore',
    mixins: [layoutMixin],
    created() {

    },
    data() {
      return {
        collapse: false,
        grid: {
          // span:8,
          xl: 8,
          lg: 8,
          md: 12,
          sm: 24,
          xs: 24
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
